import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sports_new/controller/my/help/feedback_logic.dart';
import 'package:sports_new/resources/colours.dart';
import 'package:sports_new/view/my/widgets/my_appbar.dart';
import 'package:sports_new/widgets/card.dart';
import 'package:sports_new/widgets/base/qkd_button.dart';

import '../../../utils/utils.dart';
import '../../../widgets/base/qkd_text.dart';
import '../../../widgets/picture_preview_widget.dart';
import '../../../widgets/select_bottomsheet.dart';

class FeedbackPage extends StatefulWidget {
  const FeedbackPage({super.key});

  @override
  State<FeedbackPage> createState() => _FeedbackPageState();
}

class _FeedbackPageState extends State<FeedbackPage> {
  final FeedbackLogic logic = Get.put(FeedbackLogic());
  
  @override
  Widget build(BuildContext context) {
    return GetBuilder<FeedbackLogic>(
      builder: (logic) {
        return Scaffold(
          backgroundColor: Colours.greyF2F3F7,
          appBar: const MyAppBar(title: "反馈问题"),
          body: SizedBox(
            height: Get.height,
            child: Column(
              children: [
                Expanded(
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        description(),
                        images(),
                        weChat()
                      ]
                    ),
                  ),
                ),
                Container(
                  width: Get.width,
                  padding: const EdgeInsets.symmetric(horizontal: 20,vertical: 12),
                  color: Colours.white,
                  child: QkdButton(
                    enable: logic.str.length > 10,
                    onPressed: logic.sendFeedback,
                    text: "提交",
                    borderRadius: 8,
                    backgroundColor: Colours.main,
                    foregroundColor: Colours.white,

                  ),
                )
              ],
            ),
          )
        );
      }
    );
  }

  Widget description(){
    return itemForm(
      title: "问题描述",
      child: Padding(
        padding: const EdgeInsets.only(top: 8),
        child: TextField(
          maxLines: null,
          decoration: const InputDecoration(
            filled: true,
            fillColor: Colours.greyF2F3F7,
            contentPadding: EdgeInsets.all(8),
            border: OutlineInputBorder(
              borderSide: BorderSide.none,
              borderRadius: BorderRadius.all(Radius.circular(8)),
            ),
            hintText: "请填写10个字以上的问题描述，以便我们提供更好的服务\n\n",
            hintMaxLines: 5,
            hintStyle: TextStyle(fontSize: 14, color: Colours.grey99),
          ),
          style: const TextStyle(fontSize: 14),
          strutStyle: const StrutStyle(fontSize: 16),
          cursorColor: Colours.main,
          onChanged: (str) {
            logic.str = str;
          },
        ),
      ),
    );
  }

  Widget images(){
    return itemForm(
      title: "上传凭证（问题截图）",
      child: GridView.builder(
        itemCount: logic.uploadImages.length+1> 6?6:logic.uploadImages.length+1,
        padding: const EdgeInsets.only(top: 12),
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, crossAxisSpacing: 6, mainAxisSpacing: 6),
        itemBuilder: (context, index) {
          if (index == logic.uploadImages.length) {
            return GestureDetector(
              onTap: () async {
                FocusScope.of(context).requestFocus(FocusNode());
                final result = await Get.bottomSheet(
                    const SelectBottomSheet(['拍照', '从手机相册选择']));
                if (result == 0) {
                  logic.addPhotoFromCamera(3);
                } else if (result == 1) {
                  logic.addPhotoFromGallery(3);
                }
              },
              child: Image.asset(Utils.getImgPath('add_photo2.png')),
            );
          } else {
            return GestureDetector(
              onTap: () async {
                Get.dialog(
                  PicturePreview(imageUrl: logic.uploadImages[index]),
                    useSafeArea: false);
              },
              child: ClipRRect(
                borderRadius: BorderRadius.circular(4),
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    CachedNetworkImage(
                      imageUrl: logic.uploadImages[index],
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      top: 0,
                      right: 0,
                      child: GestureDetector(
                        onTap: () => logic.onDeleteImage(index),
                        child: Container(
                          width: 22, height: 22,
                          color: Colours.blackColor,
                          child: const Icon(
                            Icons.close, color: Colours.white, size: 14,
                          ),
                        ),
                      )
                    )
                  ],
                ),
              ),
            );
          }
        },
      )
    );
  }

  Widget weChat(){
    return itemForm(
      title: "联系微信",
      axis: Axis.horizontal,
      child: Expanded(
        child: SizedBox(
          height: 20,
          child: TextField(
            textAlign: TextAlign.end,
            maxLines: 1,
            decoration: const InputDecoration(
              contentPadding: EdgeInsets.only(left: 8),
              border: OutlineInputBorder(
                borderSide: BorderSide.none,
                borderRadius: BorderRadius.all(Radius.circular(8)),
              ),
              hintText: "请输入正确的微信号，以便与您联系",
              hintStyle: TextStyle(fontSize: 14, color: Colours.grey99),
            ),
            style: const TextStyle(fontSize: 14),
            strutStyle: const StrutStyle(fontSize: 16),
            cursorColor: Colours.main,
            onChanged: (str) {
              logic.number = str;
            },
          ),
        ),
      )
    );
  }

  Widget itemForm({required Widget child,required String title,Axis axis = Axis.vertical}){
    return Block(
        cardStyle: const CardStyle(
          margin: EdgeInsets.fromLTRB(8, 8, 8, 0),
          padding: EdgeInsets.symmetric(horizontal: 12,vertical: 16),
        ),
        child: axis == Axis.vertical?Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            QkdText(title, fontSize: 16),
            child
          ],
        ):Row(
          children: [
            QkdText(title, fontSize: 16),
            child
          ],
        )
    );
  }
}
